<main>
	<section>
		<div class="tik-search">
			<i class="iconfont iconSearch"></i>
			<input type="text" oninput="searchKeyWord(this)()" placeholder="Search">
		</div>
		<div class="options-row">
			<div class="left" id="sort">
				<span>GD Score</span>
				<i class="iconfont icondown1"></i>
			</div>
			<div class="right" onclick="showFilter()">
				Filter
				<i class="iconfont iconfilter-list"></i>
			</div>
		</div>
		<div class="mask" id="mask">
			<div class="mask-con" id="maskContent">
				<div class="options-row">
					<div class="left">
						<span>GD Score</span>
						<i class="iconfont icondown1"></i>
					</div>
					<div class="right" onclick="showFilter()">
						<span>Filter</span>
						<i class="iconfont iconfilter-list"></i>
					</div>
				</div>
				<ul class="sort-list" id="sortList">
					<li class="sort-item is-active" data-sort="1">GD Score</li>
					<li class="sort-item" data-sort="2">Followers</li>
					<li class="sort-item" data-sort="7">Likes</li>
					<li class="sort-item" data-sort="3">Avg Views</li>
				</ul>
			</div>
		</div>
		<div class="filter">
			<div class="filter-header">
				<i class="iconfont iconbuzhichi" onclick="hideFilter()"></i>
				<span>Filter</span>
			</div>
			<div class="filter-body">
				<div class="search-item">
					<div class="top" onclick="showMoreSearchItem(this)">
						<div class="title">
							TikToker Info
						</div>
						<i class="iconfont iconsort-down"></i>
					</div>
					<div class="content" style="display: block">
						<div class="select-item">
							<div class="select-title">Categories</div>
							<div class="gd-select" id="categories"></div>
						</div>
						<div class="select-item">
							<div class="select-title">Country</div>
							<div class="gd-select" id="country"></div>
						</div>
						<div class="select-item">
							<div class="select-title">Gender</div>
							<div class="gd-select" id="gender"></div>
						</div>
						<div class="select-item">
							<div class="select-title">Age</div>
							<div class="gd-select" id="age"></div>
						</div>
						<div class="multi-check">
							<div class="gd-checkbox">
								<input type="checkbox" data-key="individualVerify" >
								<div class="label">Individual Verify</div>
								<i class="iconfont iconzhichi"></i>
							</div>
							<div class="gd-checkbox">
								<input type="checkbox" data-key="enterpriseVerify">
								<div class="label">Enterprise Verify</div>
								<i class="iconfont iconzhichi"></i>
							</div>
							<div class="gd-checkbox"">
								<input type="checkbox" data-key="commerce">
								<div class="label">e-Commerce Anchor</div>
								<img src="${request.contextPath}/static/img/e-commerce1.png" alt="Commerce Anchor">
							</div>
							<div class="gd-checkbox">
								<input type="checkbox" data-key="email">
								<div class="label">Contact info</div>
								<img src="${request.contextPath}/static/img/contact.png" alt="Contact info">
							</div>
							<div class="gd-checkbox">
								<input type="checkbox" data-key="website">
								<div class="label">Website</div>
								<img src="${request.contextPath}/static/img/link.png" alt="Website">
							</div>
						</div>
					</div>
				</div>
				<div class="search-item">
					<div class="top" onclick="showMoreSearchItem(this)">
						<div class="title">
							TikToker Data
						</div>
						<i class="iconfont iconsort-down"></i>
					</div>
					<div class="content">
						<div class="gd-btn-select" id="followers" data-label="Followers"></div>
						<div class="gd-btn-select" id="totalLikes" data-label="Total Likes"></div>
						<div class="gd-btn-select" id="GDScore" data-label="GD Score"></div>
						<div class="gd-btn-select" id="avgViews" data-label="Avg Views"></div>
					</div>
				</div>
				<div class="search-item">
					<div class="top" onclick="showMoreSearchItem(this)">
						<div class="title">
							Audience Demographics
						</div>
						<i class="iconfont iconsort-down"></i>
					</div>
					<div class="content">
						<div class="select-item">
							<div class="select-title">Country/Region</div>
							<div class="gd-select" id="audiCountry"></div>
						</div>
						<div class="select-item">
							<div class="select-title">Language</div>
							<div class="gd-select" id="language"></div>
						</div>
						<div class="gd-btn-select" id="audiGender" data-label="Gender Distribution">
							<div class="label">Gender Distribution</div>
							<ul class="btn-select">
								<li class="btn-select-item is-active" value="0" onclick="hideCust()">All</li>
								<li class="btn-select-item" value="1" onclick="hideCust()">Male</li>
								<li class="btn-select-item" value="2" onclick="hideCust()">Female</li>
								<li class="btn-select-item" value="3" onclick="showCust(this)">Custom</li>
							</ul>
							<ul class="btn-select">
								<li id="custGender" style="display: none;align-items: center;">
									<div style="margin-top: 0;" class="gd-select" data-label="Gander" name="gander"
									     id="gander">
										<div class="gd-select-title" style="width: 65px;">
											<div class="label">Gender</div>
											<i class="iconfont icondown1"></i>
										</div>
										<div class="gd-select-wrap" style="display: block;">
											<ul>
												<li class="gd-option is-active" value="1">Male</li>
												<li class="gd-option" value="2">Female</li>
											</ul>
										</div>
									</div>
									<span>&nbsp;>&nbsp;</span>
									<div class="num-input">
										<input style="width: 40px;" type="number" oninput="if(value.length>3)value=value.slice(0,3);if(value>100)value=100;if(value<0)value=0;" onchange="percenChange(this)" maxlength="3" max="100"
										       min="0" value="0">
										<div>%</div>
									</div>
								</li>
							</ul>
						</div>
						<div class="gd-btn-select" id="audiAge" data-label="Age Distribution"></div>
					</div>
				</div>
			</div>
			<div class="filter-footer">
				<button class="btn btn-default" onclick="clearAll()">Clear All</button>
				<button class="btn btn-info" onclick="tiktokerSearch()">Search</button>
			</div>
		</div>
	</section>
	<section class="tiktoker-list">
        <#list dataList as data>
			<a href="${contextPath}/tiktoker/${data.uniqueId}">
				<div class="tiktoker-item">
					<div class="tiktoker-info">
						<img class="avatar" src="${data.avatar}">
						<div class="tiktoker-name">
							<div class="top">
								<div class="nickname">${data.nickName}</div>
								<svg title="${data.region}" class="icon icon-country" aria-hidden="true">
									<use xlink:href="#icon_${data.region}"></use>
								</svg>
							</div>
							<div class="bottom">
                                ${data.uniqueId}
							</div>
						</div>
                        <#if data_index < 3>
							<div class="tiktoker-rank rank-${data_index+1}">
								<div class="rank-num">${data_index+1}</div>
							</div>
                        <#else>
							<div class="tiktoker-rank rank-other">
                                ${data_index+1}
							</div>
                        </#if>
					</div>
					<div class="tiktoker-data">
						<div class="data-item">
							<div class="label">GD Score</div>
							<div class="num">${data.score}</div>
						</div>
						<div class="data-item">
							<div class="label">Followers</div>
							<div class="num">${data.followerCount}</div>
						</div>
						<div class="data-item">
							<div class="label">Likes</div>
							<div class="num">${data.totalFavorited}</div>
						</div>
						<div class="data-item">
							<div class="label">Avg Views</div>
							<div class="num">${data.avgView}</div>
						</div>
					</div>
				</div>
			</a>
        </#list>
	</section>
	<section class="more">
        <#if login != false>
			<div class="rotate"><i class="iconfont icongengxin"></i></div>
	        <span class="list-footer-tx" style="display: none">You have reached the End.</span>
        <#else>
			<a href="javascript:;" onclick="toLogin()">
				View More
			</a>
        </#if>
	</section>
</main>
<script src="//at.alicdn.com/t/font_1880456_wxrmqb8capj.js"></script>
<script src="${request.contextPath}/static/js/nums.js" charset="utf-8"></script>
<script src="${request.contextPath}/static/js/gd-ui.js"></script>
<script src="${request.contextPath}/static/js/scroll.js"></script>
<script src="${request.contextPath}/static/plugins/jquery.min.js"></script>
<script>
    window.onload = () => {
        init()
	    initEvent()
    }
    function init() {
        getCountry()
        getLanguage()
        getCategories()
        getAge()
        getGender()
        getFollower()
        getTotalLikes()
        getGDScore()
        getAvgViews()
        getAudiAge()
        audiGenderAddEvent()
    }

	function initEvent() {
        let isShowSort = false
        let mask = document.getElementById('mask')
        let el_sort = document.querySelectorAll('.options-row>.left')
        el_sort.forEach(item => {
            item.addEventListener('click', () => {
                if (isShowSort) {
                    mask.hide()
                    document.body.style.overflow = 'auto'
                    sortList.hide()
                    isShowSort = false
                } else {
                    mask.show()
                    document.body.style.overflow = 'hidden'
                    sortList.show('flex')
                    isShowSort = true
                }
            })
        })
		document.querySelectorAll('.sort-item').forEach(item => {
		    item.addEventListener('click', e => {
		        document.querySelector('#sortList .is-active').classList.remove('is-active')
			    item.classList.add('is-active')
			    params.sort = item.getAttribute('data-sort')
			    document.querySelector('.tiktoker-list').showLoading()
			    getTiktokerList()
                mask.hide()
                document.body.style.overflowY = 'auto'
                el_sort.forEach(sort => {
                    sort.querySelector('span').innerText = item.innerText
                })
		    })
		})
        let maskContent = document.getElementById('maskContent')
        maskContent.addEventListener('click', (e) => {
            e.stopPropagation()
        })
        mask.addEventListener('click', (e) => {
            mask.hide()
            document.body.style.overflowY = 'auto'
            e.preventDefault()
        })
        document.querySelectorAll('.gd-checkbox').forEach(item => {
            item.addEventListener('click', () => {
                <#if login != false && user.roleId lte 2>
	                let config = {
	                    class: '',
	                    content: 'Only available for ADVANCED version users or higher,upgrade now!',
	                    confirmBtnText: 'Upgrade',
	                    confirmBtn: {
	                        event: () => {
                                window.location.href = '${contextPath}/pricing?refer=' + window.location.href
	                        }
	                    },
	                    cancelBtnText: 'Not Now',
	                }
                    showModal(config)
	                return false
                </#if>
                clickCheckbox(item)
            })
        })
        document.querySelectorAll('.gd-checkbox input').forEach(item => {
            item.addEventListener('click', () => {
                item.checked = !item.checked
            })
        })
	}
    let params = {
        pageSize: 10,
        page: 1,
        sort: 1
    }

    let searchTikTokerTimer
    function searchKeyWord(e) {
        return function () {
            if (searchTikTokerTimer) {
                clearTimeout(searchTikTokerTimer)
            }
            searchTikTokerTimer = setTimeout(() => {
                searchTikTokerTimer = null
                params.userName = e.value
                $('.tiktoker-list')[0].showLoading()
                params.page = 1
                getTiktokerList()
            }, 500)
        }
    }
	function clickCheckbox(dom) {
		let checkbox = dom.querySelector('input')
        checkbox.checked = !checkbox.checked
        let key = checkbox.getAttribute('data-key')
		if(checkbox.checked) {
		    params[key] = 1
		} else {
            params[key] = 0
		}
	}
    function hideCust() {
        document.getElementById('custGender').hide()
    }
	function showCust() {
        document.getElementById('custGender').show('flex')
	}
    function getAudiAge() {
        let e = document.getElementById('audiAge')
        let arr = [
            {
                id: 0,
                name: 'All'
            },
            {
                id: 1,
                name: '18-'
            },
            {
                id: 2,
                name: '18-24'
            },
            {
                id: 3,
                name: '25-34'
            },
            {
                id: 4,
                name: '35-44'
            },
            {
                id: 5,
                name: '45+'
            }
        ]
        getTiktokData(e, arr, 'audienceAgeMore')
    }

    function getFollower() {
        let e = document.getElementById('followers')
        let arr = [
            {
                id: 0,
                name: 'All'
            },
            {
                id: 1,
                name: '100K-500k'
            },
            {
                id: 2,
                name: '500K-1M'
            },
            {
                id: 3,
                name: '1M-2M'
            },
            {
                id: 4,
                name: '2M-5M'
            },
            {
                id: 5,
                name: '5M-10M'
            },
            {
                id: 6,
                name: '>10M'
            }
        ]
        getTiktokData(e, arr, 'followers')
    }

    function getTotalLikes() {
        let e = document.getElementById('totalLikes')
        let arr = [
            {
                id: 0,
                name: 'All'
            },
            {
                id: 1,
                name: '100K-1M'
            },
            {
                id: 2,
                name: '1M-10M'
            },
            {
                id: 3,
                name: '10M-50M'
            },
            {
                id: 4,
                name: '50M-100M'
            },
            {
                id: 5,
                name: '100M-500M'
            },
            {
                id: 6,
                name: '>500M'
            }
        ]
        getTiktokData(e, arr, 'favorite')
    }

    function getGDScore() {
        let e = document.getElementById('GDScore')
        let arr = [
            {
                id: 0,
                name: 'All'
            },
            {
                id: 1,
                name: '200-300'
            },
            {
                id: 2,
                name: '300-500'
            },
            {
                id: 3,
                name: '500-700'
            },
            {
                id: 4,
                name: '700-900'
            },
            {
                id: 5,
                name: '900-1000'
            },
            {
                id: 6,
                name: '>1000'
            }
        ]
        getTiktokData(e, arr, 'gd')
    }

    function getAvgViews() {
        let e = document.getElementById('avgViews')
        let arr = [
            {
                id: 0,
                name: 'All'
            },
            {
                id: 1,
                name: '<10K'
            },
            {
                id: 2,
                name: '10K-50K'
            },
            {
                id: 3,
                name: '50K-100K'
            },
            {
                id: 4,
                name: '100K-500K'
            },
            {
                id: 5,
                name: '500K-1M'
            },
            {
                id: 6,
                name: '1M-2M'
            },
            {
                id: 6,
                name: '>2M'
            }
        ]
        getTiktokData(e, arr, 'views')
    }

    let cusSelected = true
    let cusGender = 1
    let audienceGenderPercent = 0

    function percenChange(e) {
        audienceGenderPercent = e.value
    }

    function audiGenderAddEvent() {
        let e = document.getElementById('audiGender')
        e.querySelectorAll('.btn-select>.btn-select-item').forEach(item => {
            item.addEventListener('click', () => {
                <#if login != false && user.roleId lte 2>
	                let config = {
	                    class: '',
	                    content: 'Only available for ADVANCED version users or higher,upgrade now!',
	                    confirmBtnText: 'Upgrade',
	                    confirmBtn: {
	                        event: () => {
	                            window.location.href = '${contextPath}/pricing?refer=' + window.location.href
	                        }
	                    },
	                    cancelBtnText: 'Not Now',
	                }
	                showModal(config)
	                return false
                </#if>
                e.querySelector('.btn-select-item.is-active').classList.remove('is-active')
                item.classList.add('is-active')
                let val = item.value
                if (val !== 3) {
                    params.audienceGenderMore = val
                    cusSelected = false
                    delete params.audienceGenderPercent
                } else {
                    cusSelected = true
                    params.audienceGenderPercent = audienceGenderPercent
                    params.audienceGenderMore = cusGender
                }
            })
        })
        let e1 = e.querySelector('.gd-select')
        e1.querySelectorAll('.gd-option').forEach(item => {
            item.addEventListener('click', () => {
                cusGender = item.value
                if (cusSelected) {
                    params.audienceGenderMore = cusGender
                }
                e1.querySelector('.gd-select-wrap').hide()
                e1.querySelector('.label').innerText = item.innerText
                e1.querySelector('.gd-option.is-active').classList.remove('is-active')
                item.classList.add('is-active')
            })
        })
    }

    function getTiktokData(e, arr, paramKey) {
        let str = '<div class="label">' + e.getAttribute('data-label') + '</div>'
            + '<ul class="btn-select">'
        arr.forEach((item, index) => {
            if (index === 0) {
                str += '<li class="btn-select-item is-active" value="' + item.id + '">' + item.name + '</li>'
            } else {
                str += '<li class="btn-select-item" value="' + item.id + '">' + item.name + '</li>'
            }
        })
        str += '</ul>'
        e.innerHTML = str
        e.querySelectorAll('.btn-select-item').forEach(item => {
            item.addEventListener('click', () => {
                <#if login != false && user.roleId lte 2>
	                let config = {
	                    class: '',
	                    content: 'Only available for ADVANCED version users or higher,upgrade now!',
	                    confirmBtnText: 'Upgrade',
	                    confirmBtn: {
	                        event: () => {
	                            window.location.href = '${contextPath}/pricing?refer=' + window.location.href
	                        }
	                    },
	                    cancelBtnText: 'Not Now',
	                }
	                showModal(config)
	                return false
                </#if>
                e.querySelector('.btn-select-item.is-active').classList.remove('is-active')
                item.classList.add('is-active')
                let val = item.value
                params[paramKey] = val
            })
        })
    }

    function getGender() {
        let e = document.getElementById('gender')
        let arr = [
            {
                id: 0,
                name: 'All'
            },
            {
                id: 1,
                name: 'Male'
            },
            {
                id: 2,
                name: 'Female'
            }
        ]
        getSelectData(e, arr, 'gender')
    }

    function getCategories() {
        let e = document.getElementById('categories')
        _axios.get('/v1/blogger/type').then(res => {
            if (res.Code === 200) {
                res.Data.unshift({
                    id: 0,
                    name: 'All'
                })
                getSelectData(e, res.Data, 'category', 'name')
            }
        })
    }

    function getCountry() {
        let url = getEncodeUrl('/v1/common/region', {type: 1})
        _axios.get(url).then(res => {
            if (res.Code === 200) {
                res.Data.unshift({
                    code: 0,
                    name: 'All'
                })
                let e = document.getElementById('country')
                let audiE = document.getElementById('audiCountry')
                getSelectData(e, res.Data, 'region', 'code')
                getSelectData(audiE, res.Data, 'audienceRegionMore', 'code')
            }
        })
    }

    function getAge() {
        let e = document.getElementById('age')
        let arr = [
            {
                id: 0,
                name: 'All'
            },
            {
                id: 1,
                name: '18-24'
            },
            {
                id: 2,
                name: '25-34'
            },
            {
                id: 3,
                name: '35+'
            },
            {
                id: 4,
                name: 'other'
            }
        ]
        getSelectData(e, arr, 'age')
    }

    function getLanguage() {
        let url = getEncodeUrl('/v1/common/language', {type:1})
        _axios.get(url).then(res => {
            let e = document.getElementById('language')
            if (res.Code === 200) {
                res.Data.unshift({
                    code: 0,
                    name: 'All'
                })
                getSelectData(e, res.Data, 'audienceLanguageMore', 'code')
            }
        })
    }

    function getSelectData(e, arr, paramKey, key = 'id') {
        let str = '<ul>'
        arr.forEach((item, index) => {
            if (index === 0) {
                str += '<li class="gd-option is-active" value="' + item[key] + '">' + item.name + '</li>'
	            e.querySelector('.gd-select-title .label').innerText = item.name
            } else {
                str += '<li class="gd-option" value="' + item[key] + '">' + item.name + '</li>'
            }
        })
        str += '</ul>'
        e.querySelector('.gd-select-wrap').innerHTML = str
        e.querySelectorAll('.gd-option').forEach(item => {
            item.addEventListener('click', () => {
                e.querySelector('.gd-select-wrap').hide()
                e.querySelector('.gd-option.is-active').classList.remove('is-active')
                item.classList.add('is-active')
                e.querySelector('.label').innerText = item.innerText
                let val = item.getAttribute('value')
                if (val === '0' && (paramKey !== 'region' || paramKey !== 'audienceRegionMore')) {
                    delete params[paramKey]
                } else {
                    params[paramKey] = val
                }

            })
        })
        <#if  login != false && user.roleId lte 2>
		    document.querySelectorAll('.gd-select').forEach(item => {
		        item.addEventListener('click', e => {
		            e.preventDefault()
	                let config = {
	                    class: '',
	                    content: 'Only available for ADVANCED version users or higher,upgrade now!',
	                    confirmBtnText: 'Upgrade',
	                    confirmBtn: {
	                        event: () => {
	                            window.location.href = '${contextPath}/pricing?refer=' + window.location.href
	                        }
	                    },
	                    cancelBtnText: 'Not Now',
	                }
	                showModal(config)
	                return false
		        })
		    })
        </#if>
    }

    function showMoreSearchItem(e) {
        let icon = e.querySelector('.iconfont')
        let con = e.parentNode.querySelector('.content')
        if (icon.classList.contains('is-reverse')) {
            con.show()
        } else {
            con.hide()
        }
        icon.classList.toggle('is-reverse')
    }

    <#if login != false>
    let scrollTimer
    let hasData = true
    window.onscroll = () => {
        if(!hasData) {
            return
        }
        if (parseInt((getScrollTop() + getWindowHeight() + 200)) >= getScrollHeight()) {
            if (scrollTimer) {
                clearTimeout(scrollTimer)
            }
            scrollTimer = setTimeout(() => {
	            let list_len = document.querySelectorAll('.tiktoker-list>a').length
	            if(list_len >= params.page * 10) {
                    params.page++
                    getTiktokerList()
                }
            }, 500)
        } else {
            if (scrollTimer) {
                clearTimeout(scrollTimer)
            }
        }
    }
    </#if>

    function clearAll() {
        params = {
            pageSize: 10,
            page: 1,
            sort: 1
        }
        document.querySelectorAll('.gd-checkbox input').forEach(item => {
            item.checked = false
        })
	    document.querySelectorAll('.filter .is-active').forEach(item => {
	        item.classList.remove('is-active')
	    })
	    hideCust()
	    document.querySelectorAll('.filter .btn-select-item:first-child').forEach(item => {
            item.classList.add('is-active')
	    })
        document.querySelectorAll('.filter .gd-option:first-child').forEach(item => {
            item.classList.add('is-active')
	        item.parentElement.parentElement.previousElementSibling.querySelector('.label').innerText = item.innerText
        })
    }

    function tiktokerSearch() {
        <#if  login != false && user.roleId lte 2>
	        let config = {
	            class: '',
	            content: 'Only available for ADVANCED version users or higher,upgrade now!',
	            confirmBtnText: 'Upgrade',
	            confirmBtn: {
	                event: () => {
	                    window.location.href = '${contextPath}/pricing?refer=' + window.location.href
	                }
	            },
	            cancelBtnText: 'Not Now',
	        }
	        showModal(config)
	        return false
        </#if>
        hideFilter()
        params.page = 1
        showLoading()
        getTiktokerList()
    }

    function getTiktokerList() {
        let url = getEncodeUrl('/v1/blogger', params)
	    _axios.get(url).then(res => {
            if (res.Code === 200) {
                let e = document.querySelector('.tiktoker-list')
                if(+res.Data.totalRow  === 0) {
                    hasData = false
                    e.innerHTML = ''
                    showNoData(e)
	                hideLoading()
	                document.querySelector('.more .rotate').hide()
                    return
                }
                hasData = true
                document.querySelector('.more .rotate').show()
                document.querySelector('.more .list-footer-tx').hide()
                let str = ''
                res.Data.ItemList.forEach((item, index) => {
                    str += '<a href="https://www.gugeedata.com/tiktoker/' + item.uniqueId + '">' +
                        '<div class="tiktoker-item">' +
                        '<div class="tiktoker-info">' +
                        '<img class="avatar" src="' + item.avatar168 + '">' +
                        '<div class="tiktoker-name">' +
                        '<div class="top">' +
                        '<div class="nickname">' + item.nickname + '</div>' +
                        '<svg title="' + item.region + '" class="icon icon-country" aria-hidden="true">' +
                        '<use xlink:href="#icon_' + item.region + '"></use>' +
                        '</svg>' +
                        '</div>' +
                        '<div class="bottom">' + item.uniqueId + '</div>' +
                        '</div>'
                    if (index < 3 && params.page === 1) {
                        str += '<div class="tiktoker-rank rank-' + (index + 1) + '">' +
                            '<div class="rank-num">' + (index + 1) + '</div>' +
                            '</div>'
                    } else {
                        str += '<div class="tiktoker-rank rank-other">' + ((params.page - 1) * 10 + index + 1) + '</div>'
                    }
                    str += '</div>' +
                        '<div class="tiktoker-data">' +
                        '<div class="data-item">' +
                        '<div class="label">GD Score</div>' +
                        '<div class="num">' + numFormat(+item.score) + '</div>' +
                        '</div>' +
                        '<div class="data-item">' +
                        '<div class="label">Followers</div>' +
                        '<div class="num">' + numFormat(+item.followerCount) + '</div>' +
                        '</div>' +
                        '<div class="data-item">' +
                        '<div class="label">Likes</div>' +
                        '<div class="num">' + numFormat(+item.totalFavorited) + '</div>' +
                        '</div>' +
                        '<div class="data-item">' +
                        '<div class="label">Avg views</div>' +
                        '<div class="num">' + numFormat(+item.avgViews) + '</div>' +
                        '</div>' +
                        '</div>' +
                        '</div>' +
                        '</a>'
                })
                if (params.page > 1) {
                    e.innerHTML += str
                } else {
                    e.innerHTML = str
                }
                if(res.Data.ItemList.length < 10) {
                    hasData = false
                    document.querySelector('.more .rotate').hide()
                    let e = document.querySelector('.more .list-footer-tx')
                    e.innerHTML = 'You have reached the End.'
                    e.show()
                }
            } else if(res.Code === 403) {
                document.querySelector('.more .rotate').hide()
                let e = document.querySelector('.list-footer-tx')
                e.show()
                e.innerHTML = res.Msg.substring(3)
                setTimeout(() => {
                    document.querySelector('.more .text-link').addEventListener('click', () => {
                        window.location.href = '${contextPath}/pricing?refer=' + window.location.href
                    })
                }, 1000)
            }
            hideLoading()
        })
    }

    function showFilter() {
        <#if login == false>
            toLogin()
            return false
        </#if>
        document.querySelector('.filter').show()
        document.body.style.overflow = 'hidden'
	    document.querySelector('.tiktoker-list').hide()
    }

    function hideFilter() {
        document.querySelector('.filter').hide()
        document.body.style.overflowY = 'auto'
        document.querySelector('.tiktoker-list').show()
    }
</script>
